.channelLegend {
  --marker-size: 10px;
  --marker-color:  var(--color-primary-surface);
  --marker-hidden-color: var(--color-neutral-surface);

  &.hovering {
    .channel {
      opacity: 0.5;
    }

    .channel.hovered {
      opacity: 1;
    }
  }

}

.channelMarker::before {
  content: '';
  display: inline-block;
  width: var(--marker-size);
  height: var(--marker-size);
  background-color: var(--marker-color);
  border: 1px solid var(--marker-color);
  border-radius: 50%;
}

.channelMarker.hidden::before {
  background-color: var(--marker-hidden-color);
  border: 1px solid var(--marker-color);
}
